<div class="left-sidebar" id="left-sidebar" role="navigation">
    <div id="left-sidebar-search" class="zoom-in-hide">
        <div class="input-wrapper-for-tooltip tippy-zulip-delayed-tooltip" data-tooltip-template-id="filter-left-sidebar-tooltip-template">
            {{#> input_wrapper input_type="filter-input" custom_classes="left-sidebar-search-section" icon="search" input_button_icon="close"}}
                <input type="text" class="input-element left-sidebar-search-input home-page-input" autocomplete="off" placeholder="{{t 'Filter left sidebar' }}" />
            {{/input_wrapper}}
        </div>
        <span id="add_streams_tooltip" class="add-stream-icon-container hidden-for-spectators">
            <i id="streams_inline_icon" class="add_stream_icon zulip-icon zulip-icon-square-plus" aria-hidden="true" ></i>
        </span>
        <span class="sidebar-menu-icon channel-folders-sidebar-menu-icon hidden-for-spectators"><i class="zulip-icon zulip-icon-more-vertical" aria-label="{{t 'Show channel folders'}}"></i></span>
    </div>
    <ul id="left-sidebar-empty-list-message" class="hidden">
        {{> empty_list_widget_for_list
          empty_list_message=(t "No matches.")
          }}
    </ul>
    <div id="left-sidebar-navigation-area" class="left-sidebar-navigation-area">
        <div id="views-label-container" class="showing-expanded-navigation{{#if is_spectator}} remove-pointer-for-spectator{{/if}}">
            <i id="toggle-top-left-navigation-area-icon" class="zulip-icon zulip-icon-heading-triangle-right sidebar-heading-icon rotate-icon-down views-tooltip-target hidden-for-spectators" aria-hidden="true" tabindex="0" role="button"></i>
            {{~!-- squash whitespace --~}}
            <h4 class="left-sidebar-title"><span class="views-tooltip-target">{{ LEFT_SIDEBAR_NAVIGATION_AREA_TITLE }}</span></h4>
            <ul id="left-sidebar-navigation-list-condensed" class="filters">
                {{#each primary_condensed_views}}
                    {{> left_sidebar_primary_condensed_view_item . }}
                {{/each}}
                <li class="top_left_condensed_unread_marker left-sidebar-navigation-condensed-item">
                    <span class="unread_count normal-count"></span>
                </li>
            </ul>
            <div class="left-sidebar-navigation-menu-icon">
                <i class="zulip-icon zulip-icon-more-vertical" aria-label="{{t 'Other views'}}"></i>
            </div>
        </div>
        <ul id="left-sidebar-navigation-list" class="left-sidebar-navigation-list filters">
            {{> left_sidebar_expanded_view_items_list expanded_views=expanded_views}}
        </ul>
    </div>

    <a id="hide-more-direct-messages" class="trigger-click-on-enter" tabindex="0">
        <span class="hide-more-direct-messages-text"> {{t 'back to channels' }}</span>
    </a>
    <div id="direct-messages-section-header" class="direct-messages-container hidden-for-spectators zoom-out zoom-in-sticky">
        <i id="toggle-direct-messages-section-icon" class="zulip-icon zulip-icon-heading-triangle-right sidebar-heading-icon rotate-icon-down dm-tooltip-target zoom-in-hide" aria-hidden="true" tabindex="0" role="button"></i>
        <h4 class="left-sidebar-title"><span class="dm-tooltip-target">{{ LEFT_SIDEBAR_DIRECT_MESSAGES_TITLE }}</span></h4>
        <div class="left-sidebar-controls">
            <a id="show-all-direct-messages" class="tippy-left-sidebar-tooltip-no-label-delay" href="#narrow/is/dm" data-tooltip-template-id="show-all-direct-messages-template">
                <i class="zulip-icon zulip-icon-all-messages" aria-label="{{t 'Direct message feed' }}"></i>
            </a>
            <span id="compose-new-direct-message" class="tippy-left-sidebar-tooltip-no-label-delay auto-hide-left-sidebar-overlay" data-tooltip-template-id="new_direct_message_button_tooltip_template">
                <i class="left-sidebar-new-direct-message-icon zulip-icon zulip-icon-square-plus" aria-label="{{t 'New direct message' }}"></i>
            </span>
        </div>
        <div class="heading-markers-and-unreads">
            <span class="unread_count"></span>
        </div>
        <div class="zoom-out-hide direct-messages-search-section left-sidebar-filter-input-container">
            {{#> input_wrapper input_type="filter-input" icon="search" input_button_icon="close"}}
                <input type="text" class="input-element direct-messages-list-filter home-page-input" autocomplete="off" placeholder="{{t 'Filter direct messages' }}" />
            {{/input_wrapper}}
        </div>
    </div>
    {{~!-- squash whitespace --~}}
    <div id="left_sidebar_scroll_container" class="scrolling_list" data-simplebar data-simplebar-tab-index="-1">
        <div class="direct-messages-container zoom-out hidden-for-spectators">
            <div id="direct-messages-list"></div>
        </div>

        <div id="streams_list" class="zoom-out">
            <div id="topics_header">
                <a class="show-all-streams trigger-click-on-enter" tabindex="0">{{t 'Back to channels' }}</a> <span class="unread_count quiet-count"></span>
            </div>
            <div id="stream-filters-container">
                <ul id="stream_filters" class="filters"></ul>
                {{#unless is_guest }}
                    <div id="subscribe-to-more-streams"></div>
                {{/unless}}
                <div id="login-to-more-streams" class="only-visible-for-spectators login_button">
                    <a class="subscribe-more-link" tabindex="0">
                        <i class="subscribe-more-icon zulip-icon zulip-icon-log-in" aria-hidden="true" ></i>
                        <span class="subscribe-more-label">{{~t "LOG IN TO BROWSE MORE" ~}}</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
